<template>
  <div style="margin-top:10px;">
    <a-table
      size="middle"
      bordered
      row-key="id"
      :columns="columns"
      :data-source="dataSource"
    >
      <template slot="action" slot-scope="text, record">
        <a v-if="record.actKAppendForm"  @click="showAppendForm(record)">查看</a>
      </template>
      <template slot="actKNodeFiles" slot-scope="text, record">
        <a-dropdown v-if="record.actKNodeFiles && record.actKNodeFiles.length>0">
          <a >附件<a-icon type="down" /></a>
          <a-menu slot="overlay">
            <template v-for="(file,index) in record.actKNodeFiles">
              <a-menu-item :key="index">
                <a @click.prevent="downloadItem(file.filePath)" :href="file.filePath">{{file.filePath}}</a>
              </a-menu-item>
            </template>
          </a-menu>
        </a-dropdown>
      </template>
    </a-table>
    <a-modal
      title="节点附加表单"
      width="80%"
      :visible="desformApplyVisible"
      @cancel="desformApplyHandleCancel"
    >
      <template slot="footer">
        <a-button @click="desformApplyHandleCancel">关闭</a-button>
      </template>
      <k-form-build ref="kfd" :value="kfdJsonData" :disabled="true" />
    </a-modal>
  </div>
</template>

<script>
import { historicFlow } from '@/api/task'
import Axios from 'axios'
import { KFormBuild } from '@/components/k-form-design/index'
export default {
  name: 'historyProcessCard',
  components: {
    KFormBuild
  },
  props: {
    taskData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime'
        },
        {
          title: '结束时间',
          align: 'center',
          dataIndex: 'endTime'
        },
        {
          title: '负责人',
          align: 'center',
          dataIndex: 'assignee'
        },
        {
          title: '处理意见',
          align: 'center',
          dataIndex: 'flagTxt',
          ellipsis: true
        },
        {
          title: '审批意见',
          align: 'center',
          dataIndex: 'comment',
          ellipsis: true
        },
        {
          title: '查看附加表单',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '查看附件',
          align: 'center',
          dataIndex: 'actKNodeFiles',
          scopedSlots: { customRender: 'actKNodeFiles' }
        }
      ],
      desformApplyVisible: false,
      kfdJsonData: ''
    }
  },
  mounted() {
    const that = this
    historicFlow({
      processInstanceId: this.taskData.processInstanceId,
      taskId: this.taskData.taskId || this.taskData.id
    }).then(function(res) {
      if (res.success) {
        that.dataSource = res.result
      } else {
        that.$message.error(res.message)
      }
    })
  },
  methods: {
    showAppendForm(item) {
      if (item.actKAppendForm) {
        this.kfdJsonData = JSON.parse(item.actKAppendForm.formJson)
        this.desformApplyVisible = true
        if (item.actKAppendFormData) {
          this.$nextTick(() => {
            this.$refs.kfd.setData(JSON.parse(item.actKAppendFormData.formData))
          })
        }
      } else {
        this.$message.warning('该节点的未设计表单')
      }
    },
    desformApplyHandleCancel() {
      this.$refs.kfd.reset()
      this.desformApplyVisible = false
    },
    downloadItem(filePath) {
      const url = filePath ? window._CONFIG['staticDomainURL'] + '/' + filePath : ''
      Axios.get(url, { responseType: 'blob' })
        .then(({ data }) => {
        // 为了简单起见这里blob的mime类型 固定写死了
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = url.split('/').pop()
          link.click()
            .catch(error => {
              console.error(error)
            })
        })
    }
  }
}
</script>
